<template>
  <BasicDrawer
    v-bind="$attrs"
    width="100%"
    @register="register"
    showFooter
    :title="getTitle"
    @ok="handleSubmit"
  >
    <BasicTable @register="registerTable">
      <template #columnName="{ record }">
        <KeyOutlined
          v-if="record.columnKey === 'PRI'"
          :style="{ color: 'blue', fontSize: '16px' }"
        />
        {{ record.columnName }}
      </template>
      <template #isSearch="{ record }">
        <ApiRadioGroup
          size="small"
          v-model:value="record.isSearch"
          style="width: 120px"
          dictCode="yes_or_no"
          @change="changeIsSearch(record)"
        />
      </template>
      <template #columnComment="{ record }">
        <Input
          size="small"
          v-model:value="record.columnComment"
          style="width: 120px"
        />
      </template>
      <template #isSearchRequired="{ record }">
        <ApiRadioGroup
          size="small"
          v-model:value="record.isSearchRequired"
          style="width: 120px"
          :disabled="record.isSearch == 'N'"
          dictCode="yes_or_no"
        />
      </template>
      <template #isFormAdd="{ record }">
        <ApiRadioGroup
          size="small"
          v-model:value="record.isFormAdd"
          style="width: 120px"
          dictCode="yes_or_no"
        />
      </template>
      <template #isFormEdit="{ record }">
        <ApiRadioGroup
          size="small"
          v-model:value="record.isFormEdit"
          style="width: 120px"
          dictCode="yes_or_no"
        />
      </template>
      <template #javaType="{ record }">
        <div style="display: flex; justify-content: flex-end">
          <div>{{ record.dataType }}</div>
          <div>
            ->
            <ApiSelect
              size="small"
              v-model:value="record.javaType"
              style="width: 120px"
              dictCode="code_gen_java_type"
            />
          </div>
        </div>
      </template>
      <template #componentType="{ record }">
        <ApiSelect
          size="small"
          v-model:value="record.componentType"
          style="width: 120px"
          dictCode="code_gen_effect_type"
          @change="changeEffectType(record)"
        />
      </template>
      <template #formDictCode="{ record }">
        <ApiSelect
          size="small"
          :disabled="!isNeedApi(record.componentType)"
          style="width: 100px"
          dictCode="combo_datasource"
          @change="changeFormCodeSource(record)"
          v-model:value="record.formCodeSource"
        />
        <ApiSelect
          size="small"
          showSearch
          :disabled="!isNeedApi(record.componentType)"
          style="width: 120px"
          :dictCode="record.formCodeSource"
          v-model:value="record.formDictCode"
        />
      </template>
      <template #isFormRequired="{ record }">
        <ApiRadioGroup
          size="small"
          v-model:value="record.isFormRequired"
          style="width: 120px"
          dictCode="yes_or_no"
        />
      </template>
      <template #formRules="{ record }">
        <ApiSelect
          size="small"
          v-model:value="record.formRules"
          style="width: 200px"
          dictCode="rules"
          mode="multiple"
        />
      </template>
      <template #searchType="{ record }">
        <ApiSelect
          size="small"
          :disabled="record.isSearch === 'N'"
          v-model:value="record.searchType"
          style="width: 120px"
          dictCode="code_gen_query_type"
        />
      </template>
      <template #isTable="{ record }">
        <ApiRadioGroup
          size="small"
          v-model:value="record.isTable"
          style="width: 120px"
          dictCode="yes_or_no"
          @change="changeisTable(record)"
        />
      </template>
      <template #isCommon="{ record }">
        <ApiSelect
          size="small"
          v-model:value="record.isCommon"
          style="width: 120px"
          dictCode="yes_or_no"
        />
      </template>
      <template #cacheKey="{ record }">
        <Input
          size="small"
          v-model:value="record.cacheKey"
          v-show="!record.cacheValue"
          style="width: 120px"
        />
      </template>
      <template #cacheType="{ record }">
        <ApiSelect
          size="small"
          v-model:value="record.cacheType"
          style="width: 120px"
          dictCode="cache_type"
          v-show="!record.cacheValue"
          :disabled="!record.cacheKey"
        />
      </template>
      <template #cacheValue="{ record }">
        <Input
          size="small"
          v-model:value="record.cacheValue"
          style="width: 120px"
          v-show="!record.cacheKey"
        />
      </template>
      <template #transConfig="{ record }">
        <Input
          size="small"
          v-model:value="record.transConfig"
          :disabled="record.isTable === 'N'"
          style="width: 160px"
        />
      </template>
    </BasicTable>
    <ColumnsConfig ref="columnsRef" :codeGenId="codeGenId" />
  </BasicDrawer>
</template>
<script setup lang="ts">
import { ref, computed, unref } from 'vue';
import { ApiRadioGroup, ApiSelect } from '@/components/Form';
import { BasicTable, useTable } from '@/components/Table';
import { getColumnsList } from '@/api/sys/dev/codeGenManager';
import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
import { editColumns } from '@/api/sys/dev/codeGenManager';
import { useMessage } from '@/hooks/web/useMessage';

import { columnConfigColumns } from './data';
import { Input } from 'ant-design-vue';
import { KeyOutlined } from '@ant-design/icons-vue';
const codeGenId = ref('');
const { createMessage } = useMessage();
const [registerTable, { getDataSource, setTableData, reload }] = useTable({
  api: getColumnsList,
  columns: columnConfigColumns,

  // 函数触发 不自动加载 请求后端需带codeGenId
  immediate: false,
  // 注意 封装时如果使用searchForm则自动立即加载
  useSearchForm: false,
  rowKey: 'id',
  bordered: true,
  showIndexColumn: false,
  pagination: false,
  // 必须加上！！
  beforeFetch: (params: Recordable) => {
    params.codeGenId = codeGenId.value;
    return params;
  },
  afterFetch: (result) => {
    if (result) {
      console.log('result', result);
      result.forEach((e) => {
        if (e.formRules) {
          e.formRules = e.formRules.split(',');
        } else {
          e.formRules = [];
        }
      });
    }
    return result;
  },
});
const isUpdate = ref(false);
const getTitle = computed(() => (!unref(isUpdate) ? '新增配置' : '编辑配置'));
const [register, { setDrawerProps, closeDrawer }] = useDrawerInner(
  async (id) => {
    codeGenId.value = id;
    reload();
  }
);

const needApiSelect = 'ApiRadioGroup,ApiSelect';
const isNeedApi = (effectType: string) =>
  needApiSelect.indexOf(effectType) > -1;
function changeEffectType(record) {
  record.formCodeSource = '';
  record.formDictCode = '';
}
function changeIsSearch(record) {
  record.searchType = '';
}
function changeisTable(record) {
  if (record.isTable === 'N') {
    record.transConfig = '';
  }
}
function changeFormCodeSource(record) {
  record.formDictCode = '';
}

async function handleSubmit() {
  setDrawerProps({ confirmLoading: true });
  const configs = getDataSource();
  configs.map((c) => {
    const newConfig = Object.assign(c);
    newConfig.formRules = newConfig.formRules.toString();
    return newConfig;
  });
  await editColumns({ id: codeGenId.value, configs }).catch(() =>
    setDrawerProps({ confirmLoading: false })
  );
  setDrawerProps({ confirmLoading: false });

  createMessage.success('修改成功');
  closeDrawer();
}
</script>
